<template>
	<view>
		<view class="outView">
			<view class="outView-l">
				负责人
			</view>
			<view class="outView-r">
				<input type="text" placeholder="请输入姓名" />
			</view>
		</view>
		<view class="outView">
			<view class="outView-l">
				身份证号
			</view>
			<view class="outView-r">
				<input type="text" placeholder="请输入身份证号" />
			</view>
		</view>
		<view class="outView">
			<view class="outView-l">
				手机号
			</view>
			<view class="outView-r">
				<input type="text" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="outView">
			<view class="outView-l">
				验证码
			</view>
			<view class="inputView">
				<input type="text" placeholder="输入验证码" />
				<view class="tag-view">
					<uni-tag :inverted="true" text="获取验证码" type="primary"
						style="float: right;  margin: -50rpx 10rpx 0 0;" class="no-border" />
				</view>

				<view class='form' v-if='codelogin'>
					<input type="digit" controlled="true" v-model="code" class='codeinput' :password="show"
						placeholder="请输入验证码" placeholder-class="placeholder">
					<view :class="disabled ? 'huoquzhong' : 'huoqu'" @click="get_code">{{ time }}{{ text }}</view>
				</view>

			</view>


		</view>
		<view class="outView">
			<view class="outView-l">
				店名
			</view>
			<view class="outView-r">
				<input type="text" placeholder="请输入店名" />
			</view>
		</view>
		<view class="outView">
			<view class="outView-l">
				工商营业执照号码
			</view>
			<view class="outView-r">
				<input type="text" placeholder="请输入工商营业执照号码" />
			</view>
		</view>
		<view class="outView">
			<view class="outView-l">
				经营区域
			</view>
			<view class="outView-r">
				<uni-data-select style="width: 400rpx;height: 60rpx; margin-top: 20rpx;" v-model="value"
					:localdata="range" @change="change"></uni-data-select>
			</view>
		</view>
		<view class="outView">
			<view class="outView-l">
				地址
			</view>
			<view class="outView-r">
				<input type="text" placeholder="请输入地址" />
			</view>
		</view>
		<view class="centerView">
			<input type="text" placeholder="请输入商家介绍" style="font-size: 28rpx;" />
		</view>

		<view class="footer">
			<text>身份证正反面照片</text>
			<view class="footerView">
				<view class="example-body-1">
					<uni-file-picker class="file-picker" limit="9" />
				</view>
			</view>
		</view>

		<view class="footer">
			<text>营业执照</text>
			<view class="example-body">
				<uni-file-picker></uni-file-picker>
			</view>
		</view>
		<view class="footer">
			<text>门面照片</text>
			<view class="example-body">
				<uni-file-picker></uni-file-picker>
			</view>
		</view>

		<view class="footer">
			<text>营业时间</text>
			<view class="one">
				<text>开始时间：</text>
				<view class="example-body">
					<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog"
						style="width: 395rpx;" />
				</view>
			</view>
			<view class="one">
				<text>结束时间：</text>
				<view class="example-body">
					<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog"
						style="width: 395rpx;" />
				</view>
			</view>
		</view>

		<view class="footer">
			<text>店铺状态</text>
			<view class="two">
				<text>状态：</text>
				<switch checked @change="switch1Change" />
			</view>
		</view>

		<view class="footer">
			<text>服务类别</text>
			<checkbox-group>
				<label>
					<checkbox value="cb" checked="true" style="transform:scale(0.7)" />车辆维修
				</label>
				<label>
					<checkbox value="cb" style="transform:scale(0.7)" />汽车保养
				</label>
				<label>
					<checkbox value="cb" checked="true" style="transform:scale(0.7)" />专业洗车
				</label>
				<label>
					<checkbox value="cb" style="transform:scale(0.7)" />就近加油
				</label>
			</checkbox-group>
		</view>


		<navigator class="btn" :url="'/pages/businessInformation/businessInformation'">
			<button type="primary">保存</button>
		</navigator>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				disabled: false,
				phone: '',
				password: '',
				code: '',
				ltype: '',
				text: '获取验证码',
				time: '',

				value: 0,
				range: [{
						value: 0,
						text: "焦作市山阳区"
					},
					{
						value: 1,
						text: "焦作市山阳区"
					},
					{
						value: 2,
						text: "焦作市山阳区"
					},
				],
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},

			//验证
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'none'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//获取验证码
			async get_code() {
				if (this.disabled) {
					return;
				}
				if (!this.validate('phone')) return;
				uni.showLoading({
					title: '发送中',
					mask: true
				});
				uni.request({
					url: '你的发送短信的接口',
					data: '接口需要的参数',
					method: 'post', //get、post、delete
					success: re => {
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						console.log(re)
						if (re.data.code == 0) {
							this.disabled = true;
							this.setInterValFunc(); //开启倒计时
						} else {
							uni.showToast({
								title: re.data.msg,
								icon: "none"
							})
						}
					}
				})
			},

			//倒计时
			setInterValFunc() {
				this.time = 60;
				this.text = '秒';
				this.setTime = setInterval(() => {
					if (this.time - 1 == 0) {
						this.time = '';
						this.text = '重新获取';
						this.code = '';
						this.disabled = false;
						clearInterval(this.setTime);
					} else {
						this.time--;
					}
				}, 1000);
			},


		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.outView {
		width: 648rpx;
		height: 88rpx;
		margin: auto;
		display: flex;
		border-bottom: 2rpx solid #d4d4d4;
		background-color: white;
	}

	.outView-l {
		width: 252rpx;
		line-height: 90rpx;
		font-size: 28rpx;
	}

	.outView-r input {
		font-size: 28rpx;
		border: 2rpx solid #d4d4d4;
		margin-top: 20rpx;
		width: 380rpx;
		height: 60rpx;
		padding-left: 20rpx;
	}

	.centerView {
		width: 600rpx;
		height: 150rpx;
		margin: auto;
		display: flex;
		border: 2rpx solid #d4d4d4;
		background-color: white;
		padding: 10rpx 20rpx 0 20rpx;
		color: #B2B2B2;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.inputView input {
		font-size: 28rpx;
		border: 2rpx solid #d4d4d4;
		margin-top: 20rpx;
		width: 380rpx;
		height: 60rpx;
		padding-left: 20rpx;
	}

	.no-border {
		font-size: 28rpx;
		border: none !important;
	}

	.footerView {
		padding-top: 20rpx;
	}

	.footer {
		padding-left: 50rpx;
		font-size: 28rpx;
		padding-top: 10rpx;
	}

	.example-body {
		padding-top: 20rpx;
	}

	.btn {
		width: 600rpx;
		line-height: 72rpx;
		margin: auto;
		padding-top: 20rpx;
	}

	.one {
		display: flex;
	}

	.one text {
		line-height: 110rpx;
		margin-left: 60rpx;
	}

	.two {
		padding-top: 10rpx;
		margin-left: 60rpx;
	}

	.footer checkbox-group {
		padding-top: 10rpx;
	}
</style>